<template>
  <div class="profit">
    <div>
      <van-sticky>
        <van-nav-bar
          class="header"
          title="收益"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <div class="showProfit">
      <van-tabs v-model="active">
        <van-tab title="全部">
          <van-card
            v-for="item in orderData"
            :key="item.id"
            :price="timestampToTime(item.orderTime)"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :title="item.customer.username"
            :thumb="item.customer.userFace"
            currency=""
            @click="toOrderInfo(item)"
          >
            <template #tags>
              <van-tag plain type="success">{{ item.status }}</van-tag>
            </template>
            <template #footer>
              <van-tag plain>¥{{ item.total }}</van-tag>
            </template>
          </van-card>
        </van-tab>
        <van-tab title="提现">
          <van-card
            v-for="item in withDrawData"
            :key="item.id"
            title="提现-银行卡"
            :price="item.money + '.00'"
          >
            <template #footer>
              <van-tag plain>{{ timestampToTime(item.applyTime) }}</van-tag>
            </template>
            <template #desc>
              <van-tag v-if="item.status == '通过'" plain type="success">{{
                item.status
              }}</van-tag>
              <van-tag v-if="item.status == '不通过'" plain type="danger">{{
                item.status
              }}</van-tag>
              <van-tag v-if="item.status == '未审核'" plain type="warning">{{
                item.status
              }}</van-tag>
            </template>
          </van-card>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { get } from "@/http/axios";
export default {
  data() {
    return {
      active: 1,
      page: 1,
      pageSize: 20,
      status: "已完成",
      applyType: "提现",
      userId: "",
      orderData: [],
      withDrawData: [],
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),

    toOrderInfo(item) {
      this.$router.push({
        path: "/manager/orderinfo",
        query: {
          item,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    async getAllOrderData() {
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        status: this.status,
        employeeId: this.userId,
      };
      let res = await get("/order/pageQuery", data);
      this.orderData = res.data.data.list;
    },
    async getALLWithDrawData() {
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        applyType: this.applyType,
        userId: this.userId,
      };
      let res = await get("/accountApply/pageQueryAccountApply", data);
      this.withDrawData = res.data.data.list;
    },
    timestampToTime(time) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "/" + MM + "/" + d + "  " + h + ":" + m + ":" + s;
    },
  },
  created() {
    this.getUserInfo().then((r) => {
      this.userId = r.data.data.id;
      // 自动获取订单数据
      this.getAllOrderData();

      this.getALLWithDrawData();
    });
  },
  mounted() {},
};
</script>
<style  scoped>
.header {
  top: 0px;
  height: 50px;
  background: #7cabf7;
  background: -webkit-linear-gradient(to bottom, #a1c4fd, #c2e9fb);
  background: linear-gradient(to bottom, #a1c4fd, #c2e9fb);
}
</style>